const path = require('path')

//安装html-webpack-plugin   ：npm i html-webpack-plugin -D
//导入在内存中生成的html页面的插件
//只要是插件 都一定要放到plugins节点中去
//这个插件的两个作用：
//1.自动在内存中根据页面生成一个内存的页面
//2.自动，把打包好的bundle.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')




//这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
    mode: 'development',
    //在配置文件中，需要手动指定入口 和出口
    entry: path.join(__dirname, './src/main.js'), //入口，表示，要使用webpack打包那个文件
    output: { //输出文件的相关配置
        path: path.join(__dirname, './dist'), //指定 打包好的文件，输出到那个目录中去
        filename: 'bundle.js' //这是指定 输出的文件的名称
    },
    plugins: [ //配置插件的节点
        new htmlWebpackPlugin({ //创建一个在内存中生成HTML页面的插件
            template: path.join(__dirname, './src/index.html'), //指定的模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html' //指定生成的页面名称
        }),
        new VueLoaderPlugin()
    ],
    module: { //这个节点，用于配置所有第三方模块加载器
        rules: [ //所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理.scss文件的第三方loader规则
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=74252&name=[hash:8]-[name].[ext]'},//配置处理图片路径的第三方loader规则，limit给定的值，
            //是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串，
            //如果图片小于给定的limit值，则会被转移为base64的字符串
            //name是给图片指定名称，[name].[ext]的意思是指定为原文件名称，为了避免多个图片重命名，使用[hash:8]-进行区分，8表示取hash值的前8位
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//配置处理字体文件路径的第三方loader规则
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置Babel来转换更高级的ES语法
            {test:/\.vue$/,use:'vue-loader'},//处理 .vue文件的loader
        ]
    },
    resolve:{
        alias:{//修改Vue被导入时的包的路径
            //"vue$":"vue/dist/vue.js"
        }
    }
}
